<template>
  <el-form>
    <el-row>
      <el-row class="borderCss">
        <el-col :span="12">
          <div
            class="marginInfo"
            id="heartWarningPie"
            style="height: 460px"
          ></div>
        </el-col>
        <el-col :span="11">
          <el-row style="margin-top: 20px">
            <el-row>
              <el-col style="margin-left: 15px">
                <el-col :span="4" style="margin-top: 17px">
                  <img src="./boy.png" alt="" style="width: 40px" />
                </el-col>
                <el-col :span="8" style="margin-top: 20px">
                  <el-row
                    v-for="(info, index) in schoolDataObj.findALLNum"
                    :key="index"
                  >
                    <el-row v-if="info.code == 1"
                      >男生人数：<span style="color: #03a9f4">{{
                        info.num
                      }}</span></el-row
                    >
                    <el-row v-if="info.code == 1"
                      >预警人数：<span style="color: red">{{
                        info.levelNum
                      }}</span></el-row
                    >
                  </el-row>
                </el-col>
                <el-col :span="4" style="margin-top: 17px">
                  <img src="./girl.png" alt="" style="width: 40px" />
                </el-col>
                <el-col :span="8" style="margin-top: 20px">
                  <el-row
                    v-for="(info, index) in schoolDataObj.findALLNum"
                    :key="index"
                  >
                    <el-row v-if="info.code == 2"
                      >女生人数：<span style="color: #03a9f4">{{
                        info.num
                      }}</span></el-row
                    >
                    <el-row v-if="info.code == 2"
                      >预警人数：<span style="color: red">{{
                        info.levelNum
                      }}</span></el-row
                    >
                  </el-row>
                </el-col>
              </el-col>
            </el-row>
          </el-row>
          <el-row>
            <div class="marginInfo" id="sexBar" style="height: 330px"></div>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="borderCss marginInfo" style="margin-left: 5px">
        <div
          class="marginInfo"
          id="gradeWarningDistribution"
          style="height: 300px"
        ></div>
      </el-row>
      <el-row class="borderCss marginInfo" style="margin-left: 5px">
        <div
          class="marginInfo"
          id="gradeNotMeasuredDistribution"
          style="height: 300px"
        ></div>
      </el-row>
    </el-row>
  </el-form>
</template>

<script>
import { mapGetters } from "vuex";
import * as echarts from "echarts";
export default {
  name: "thirdRegister",
  props: ["schoolDataObj"],
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {},
  mounted() {
    this.getChartData();
  },
  methods: {
    getChartData() {
      let obj = this.schoolDataObj;

      let boyList = [];
      let girlList = [];
      let levelDictValueData = [];
      let sexObj = [];
      for (let zz = 0; zz < obj.levelData.length; zz++) {
        sexObj.push([]);
        levelDictValueData.push(obj.levelData[zz].dictValue);
      }
      obj.findLevelSexNum.map((item) => {
        if (item.level) sexObj[item.level - 1].push(item);
      });
      sexObj.map((vv) => {
        vv.map((item) => {
          if (item.code == "1") {
            boyList.push({
              value: item.num,
              level: item.level + "",
              code: item.code + "",
            });
          } else if (item.code == "2") {
            girlList.push({
              value: item.num,
              level: item.level + "",
              code: item.code + "",
            });
          }
        });
      });
      console.log(obj);
      this.initChart1(
        "sexBar",
        "预警性别分布",
        boyList,
        girlList,
        levelDictValueData
      );

      let gradeList = {};
      let xAxisDataGrade = [];
      obj.findAllGradeLevelInterveneNum.map((item) => {
        if (!gradeList[item.code]) {
          gradeList[item.code] = [];
          xAxisDataGrade.push(item.code);
        }
        gradeList[item.code][item.level - 1] = item;
      });

      const levelList = [];

      // let newItem = { value: item.num, levelStr: item.level + "" };

      Object.values(gradeList).forEach((list) => {
        list.map((item) => {
          const level = item.level - 1;
          if (!levelList[level]) {
            levelList[level] = [];
          }
          levelList[level].push({ value: item.num, levelStr: item.level + "" });
        });
      });

      let seriesGradeData = [];
      let index = 0;
      let colorList = [
        "#FF4500",
        "#FFA07A",
        "#FFD700",
        "#8552a1",
        "#0D8FBF",
        "#224b8f",
      ];
      levelList.map((item) => {
        seriesGradeData.push({
          name: levelDictValueData[index],
          type: "bar",
          barMaxWidth: 20,
          emphasis: {
            focus: "series",
          },
          data: item,
          itemStyle: {
            normal: {
              borderRadius: [5, 5, 0, 0],
              color: colorList[index],
              label: {
                show: true, //开启显示
                position: "top", //在上方显示
                textStyle: {
                  //数值样式
                  color: "white",
                  fontSize: 12,
                },
              },
            },
          },
        });
        index++;
      });

      this.getGradeLevel(
        "gradeWarningDistribution",
        "各年级预警分布",
        xAxisDataGrade,
        seriesGradeData,
        levelDictValueData
      );

      let gradeNoAxisData = [];
      let gradeNoSeriesData = [];
      obj.findAllGradeNoTestNum.map((item) => {
        if (!item) {
          return;
        }
        gradeNoAxisData.push(item.code);
        gradeNoSeriesData.push(item.num);
      });
      this.initChart(
        "gradeNotMeasuredDistribution",
        "各年级未测分布",
        gradeNoAxisData,
        gradeNoSeriesData
      );

      let testNum = this.schoolDataObj.findReleaseFinishTestNum.length
        ? obj.findReleaseFinishTestNum[0].num
        : 0;
      let seriesData = [];
      let nameList = ["正常人数"].concat(levelDictValueData);
      let allNum = 0;
      this.schoolDataObj.findLevelNum.map((item) => {
        if (!item || !item.code) {
          return false;
        }
        allNum += item.num;
        seriesData.push({
          value: item.num,
          name: nameList[item.code],
          code: item.code,
        });
      });
      seriesData.unshift({
        value: testNum - allNum,
        name: "正常人数",
        code: "0",
      });

      this.getSchoolPieInfo(seriesData);
    },
    initChart(id, title, xAxisData, seriesData) {
      var chartDom = document.getElementById(id);
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: title,
          textStyle: {
            color: "#0986b3",
          },
        },
        grid: {
          top: 80,
          left: 40,
          bottom: "15%",
          height: 170,
        },
        xAxis: {
          type: "category",
          data: xAxisData,
          axisLabel: {
            interval: 0,
            rotate: 40,
            textStyle: {
              color: "white",
            },
          },
        },
        yAxis: {
          name: "单位：人",
          nameTextStyle: {
            padding: [0, 0, 10, -15], // 四个数字分别为上右下左与原位置距离
            color: "white",
          },
          type: "value",
          axisLabel: {
            interval: 0,
            rotate: 40,
            textStyle: {
              color: "white",
            },
          },
        },
        series: [
          {
            type: "bar",
            emphasis: {
              focus: "series",
            },
            barMaxWidth: 20,
            data: seriesData,
            itemStyle: {
              normal: {
                borderRadius: [5, 5, 0, 0],
                color: "#409eff",
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "white",
                    fontSize: 12,
                  },
                },
              },
            },
          },
        ],
      };
      option && myChart.setOption(option);
      if (id == "gradeNotMeasuredDistribution") {
        myChart.on("click", (params) => {
          // 在用户点击后控制台打印数据的名称
          console.log(params);
          this.$router.push({
            path: "/desk/todo",
            query: {
              gradeName: params.name,
              tenantId: this.schoolDataObj.tenantId,
              todoType: "undone",
              specialTypeId: "1",
            },
          });
        });
      } else if (id == "distributionBar") {
        myChart.on("click", (params) => {
          // 在用户点击后控制台打印数据的名称
          console.log(params);
          this.$router.push({
            name: "异常详情",
            query: {
              typeName: params.name,
              tenantId: this.schoolDataObj.tenantId,
            },
          });
        });
      }
    },
    initChart1(id, title, boyList, girlList, levelDictValueData) {
      var chartDom = document.getElementById(id);
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: title,
          textStyle: {
            color: "#0986b3",
          },
        },
        grid: {
          top: "28%",
          bottom: "20%",
          height: 190,
        },
        legend: {
          right: "10%",
          orient: "vertical",
          align: "right",
          data: ["男", "女"],
          textStyle: {
            color: "white",
          },
        },
        xAxis: {
          data: levelDictValueData,
          axisLabel: {
            interval: 0,
            rotate: 40,
            textStyle: {
              color: "white",
            },
          },
        },
        yAxis: {
          name: "单位：人",
          nameTextStyle: {
            padding: [0, 0, 20, -15], // 四个数字分别为上右下左与原位置距离
            color: "white",
          },
          type: "value",
          axisLabel: {
            textStyle: {
              color: "white",
            },
          },
        },
        series: [
          {
            type: "bar",
            name: "男",
            emphasis: {
              focus: "series",
            },
            data: boyList,
            barMaxWidth: 20,
            itemStyle: {
              normal: {
                borderRadius: [5, 5, 0, 0],
                color: "#4ad2ed",
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "white",
                    fontSize: 12,
                  },
                },
              },
            },
          },
          {
            type: "bar",
            name: "女",
            emphasis: {
              focus: "series",
            },
            barMaxWidth: 20,
            data: girlList,
            itemStyle: {
              normal: {
                borderRadius: [5, 5, 0, 0],
                color: "#c96797",
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "white",
                    fontSize: 12,
                  },
                },
              },
            },
          },
        ],
      };
      option && myChart.setOption(option);
      if (id == "sexBar") {
        myChart.on("click", (params) => {
          // 在用户点击后控制台打印数据的名称
          console.log(params);
          this.$router.push({
            name: "年级详情列表",
            query: {
              sex: params.data.code,
              level: params.data.level,
              projectId: this.schoolDataObj.projectId,
              tenantId: this.schoolDataObj.tenantId,
            },
          });
        });
      }
    },
    getGradeLevel(id, title, xAxisData, seriesGradeData, legendData) {
      var chartDom = document.getElementById(id);
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: title,
          textStyle: {
            color: "#0986b3",
          },
        },
        legend: {
          right: "10%",
          align: "right",
          data: legendData,
          textStyle: {
            color: "white",
          },
        },
        grid: {
          top: 80,
          left: 40,
          bottom: "15%",
          height: 170,
        },
        xAxis: {
          type: "category",
          data: xAxisData,
          axisLabel: {
            interval: 0,
            rotate: 40,
            textStyle: {
              color: "white",
            },
          },
        },
        yAxis: {
          name: "单位：人",
          nameTextStyle: {
            padding: [0, 0, 10, -15], // 四个数字分别为上右下左与原位置距离
            color: "white",
          },
          type: "value",
          axisLabel: {
            interval: 0,
            rotate: 40,
            textStyle: {
              color: "white",
            },
          },
        },
        series: seriesGradeData,
      };
      option && myChart.setOption(option);
      myChart.on("click", (params) => {
        // 在用户点击后控制台打印数据的名称
        console.log(params);
        this.$router.push({
          name: "年级详情列表",
          query: {
            level: params.data.levelStr,
            gradeName: params.name,
            projectId: this.schoolDataObj.projectId,
            tenantId: this.schoolDataObj.tenantId,
          },
        });
      });
    },
    getSchoolPieInfo(seriesData) {
      var chartDom = document.getElementById("heartWarningPie");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        legendHoverLink: false,
        grid: {
          height: 200,
        },
        title: {
          text: "危机预警概况",
          textStyle: {
            color: "#0986b3",
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{a}<br />{b}: {c}人(占比：{d}%)",
        },
        legend: {
          orient: "horizontal",
          top: "87%",
          textStyle: {
            color: "white",
          },
        },
        color: [
          "green",
          "#FF4500",
          "#FFA07A",
          "#FFD700",
          "#8552a1",
          "#0D8FBF",
          "#224b8f",
        ],
        series: [
          {
            name: "心理安全预警",
            type: "pie",
            radius: ["40%", "60%"],
            center: ["50%", "45%"],
            data: seriesData,
            labelLine: {
              length: 7,
              length2: 5,
              show: true,
            },
            label: {
              // position: "inside",
              color: "white",
              formatter: "{d}%",
            },
          },
        ],
      };

      option && myChart.setOption(option);
      myChart.on("click", (params) => {
        // 在用户点击后控制台打印数据的名称
        console.log(params);
        this.$router.push({
          name: "年级详情列表",
          query: {
            level: params.data.code,
            projectId: this.schoolDataObj.projectId,
            tenantId: this.schoolDataObj.tenantId,
          },
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
</style>
